<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 800px;
        height: 800px;
      }
    </style>
  </head>

  <body>
    <!-- svg双闭合标签：默认宽度与高度300 * 150  svg绘制图形务必在svg标签内部使用绘制图形 -->
    <svg class="box">
      <!-- x1 y1第一个点的坐标  x2 y2 第二个点的坐标 -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
      <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
      <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 fill-opacity透明度-->
      <polyline
        points="300 300, 50 100, 120 400,20,20"
        fill-opacity="0"
        stroke="cyan"
      ></polyline>
      <!-- 绘制矩形 -->
      <!-- fill属性：设置填充颜色的  fill-opacity设置填充颜色的透明度  stroke：线的颜色 -->
      <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
      <!-- 绘制圆形 -->
      <circle cx="370" cy="95" r="50" style="stroke: cyan; fill: none"></circle>
      <!-- 绘制圆形|椭圆 -->
      <ellipse cx="500" cy="500" rx="100" ry="50" style="fill: black"></ellipse>
      <!-- 多边行 -->
      <polygon
        points="600 100, 300 400, 750 100"
        stroke="red"
        fill-opacity="0"
      />
      <!-- 绘制任意图形 -->
      <!-- 
        M移动到初始位置
        L画线
        z将结束和开始点闭合 -->
      <path
        fill-opacity="0"
        stroke="skyblue"
        d="
  M 10  10
  L 20 400
  L 30 120
  L 40 66
  L 50 99
  L 60 120
  L 70 99
  Z
"
      ></path>
    </svg>
  </body>
</html>
